import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import {memo} from 'react';

import HomePage from '@/screens/home/index';
import Chat from '@/screens/message/index';
import Process from '@/screens/process/index';
import SysSettings from '@/screens/user-center/sys-settings';
const Tab = createBottomTabNavigator();
import { CircleUser, Clock3, Home, MessageSquareMore  } from 'lucide-react-native'

// 定义图标组件在渲染函数外部
const renderHomeIcon = ({color}: {color: string}) => <Home color={color} size={24} />;
const renderClockIcon = ({color}: {color: string}) => <Clock3 color={color} size={24} />;
const renderMessageIcon = ({color}: {color: string}) => <MessageSquareMore color={color} size={24} />;
const renderUsersIcon = ({color}: {color: string}) => <CircleUser color={color} size={24} />;
function BottomTab() {
  return (
    <Tab.Navigator>
      <Tab.Screen component={HomePage} name="Home" options={{
          headerShown: false,
          tabBarIcon: renderHomeIcon,
          tabBarLabel: '首页'
        }}/>
      <Tab.Screen component={Process} name="Process" options={{
          headerShown: false,
          tabBarIcon: renderClockIcon,
          tabBarLabel: '进程'
        }}/>
      <Tab.Screen component={Chat} name="Chat" options={{
          headerShown: false,
          tabBarIcon: renderMessageIcon,
          tabBarLabel: '消息'
        }}/>
      <Tab.Screen component={SysSettings} name="SysSettings" options={{
          headerShown: false,
          tabBarIcon: renderUsersIcon,
          tabBarLabel: '我的'
        }}/>
    </Tab.Navigator>
  );
}

export default memo(BottomTab);
